<template>
	<view
		:class="{
			'r-tabbar-item': true,
			'r-tabbar-item--active': active
		}"
		:style="{
			...getComponentThemeStyle,
			color,
			width: widthComp + 'px'
		}"
		@click="onClick"
	>
		<view
			:class="{
				'r-tabbar-item__icon': true
			}"
		>
			<r-badge :dot="dot" :content="badge" :color="badgeColor" :max="max" :showZero="showZero" :position="position">
				<!-- renderIcon -->
				<slot name="icon" v-if="$slots.icon" :active="active"></slot>
				<r-icon v-else-if="icon" :name="icon" :prefix="iconPrefix" size="var(--r-tabbar-item-icon-size)" :color="color"></r-icon>
			</r-badge>
			<view
				:class="{
					'r-tabbar-item__text': true
				}"
				:style="{
					color
				}"
			>
				<slot></slot>
			</view>
		</view>
	</view>
</template>
<script setup>
import { computed, inject, ref, onMounted } from 'vue';
import { uniqueId, findIndex } from '@/uni_modules/r-utils-common/js_sdk/index.js';
import { CONFIG_PROVIDER_KEY, TABBAR_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';
import { datas } from '../themes/index.js';
import { getComponentThemeCssVar } from '@/uni_modules/r-theme-base/js_sdk/useComponentTheme.js';

const emit = defineEmits(['click']);
const props = defineProps({
	name: {
		type: [String, Number]
	},
	icon: {
		type: String,
		default: ''
	},
	iconPrefix: {
		type: String,
		default: 'van-icon'
	},
	dot: {
		type: Boolean,
		default: false
	},
	badge: {
		type: [String, Number],
		default: ''
	},
	badgeColor: {
		type: [String],
		default: '#ee0a24'
	},
	//   最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效
	max: {
		type: [String, Number]
	},
	//   设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 px
	offset: {
		type: Array
	},
	//   当 content 为数字 0 或字符串 '0' 时，是否展示徽标
	showZero: {
		type: Boolean,
		default: true
	},
	//   徽标位置，可选值为 top-left bottom-left bottom-right
	position: {
		type: [String],
		default: 'top-right'
	},
	//  主题
	themeName: {
		type: [String],
		default: 'default'
	}
});
const componentsId = ref(0);
const componentsName = 'r-tabbar-item';
const themeInject = inject(CONFIG_PROVIDER_KEY, {});

const getComponentThemeStyle = computed(() => {
	let themeName = props.themeName;

	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}

	return {
		...getComponentThemeCssVar(themeName, 'r-base', datas.value),
		...getComponentThemeCssVar(themeName, componentsName, datas.value)
	};
});

const parentInject = inject(TABBAR_KEY, {});

const widthComp = computed(() => {
	let width = 0;
	if (parentInject?.Rect?.value?.width) {
		width = parentInject.Rect.value.width;
	}
	let length = 1;
	if (parentInject?.children?.value?.length) {
		length = parentInject?.children?.value?.length;
	}

	return width / length;
});
const index = computed(() => {
	let list = [];
	if (parentInject?.children?.value?.length) {
		list = parentInject.children.value;
	}
	return findIndex(list, (t) => t.id == componentsId.value);
});
const active = computed(() => {
	let parentValue = parentInject?.props?.value;

	return props.name === parentValue || index.value === parentValue;
});

const color = computed(() => {
	const { activeColor, inactiveColor } = parentInject.props;
	return active.value ? activeColor : inactiveColor;
});
const onClick = (event) => {
	if (!active.value) {
		parentInject.setActive(props.name || index.value);
	}
	emit('click', event);
};
onMounted(() => {
	componentsId.value = uniqueId(componentsName + '-');
	if (parentInject?.setChildren) {
		parentInject.setChildren({
			id: componentsId.value
		});
	}
});
</script>
<style lang="scss" scoped>
.r-tabbar-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--r-tabbar-item-text-color);
	font-size: var(--r-tabbar-item-font-size);
	line-height: var(--r-tabbar-item-line-height);
	cursor: pointer;

	&__icon {
		margin-bottom: var(--r-tabbar-item-icon-margin-bottom);
		font-size: var(--r-tabbar-item-icon-size);
		padding-top: var(--r-padding-base);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	&--active {
		color: var(--r-tabbar-item-active-color);
		background-color: var(--r-tabbar-item-active-background);
	}
	&__text {
		padding-top: var(--r-padding-base);
		font-size: var(--r-tabbar-item-font-size);
		line-height: var(--r-tabbar-item-line-height);
	}
}
</style>
